<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Rippl - the &lt;canvas&gt; library</title>
    <meta charset="utf-8">
    <link href="docs/css/bootstrap.min.css" rel="stylesheet" />
    <link href="docs/css/prettify.css" rel="stylesheet" />
    <link href="docs/css/rippl.css" rel="stylesheet" />
  </head>
  <body onload="prettyPrint()">
    <div class="sidebar">
      <ul class="unstyled">
        <li><a href="#">What is Rippl?</a></li>
        <li>
          <a href="#events">Events</a>
          <ul>
            <li><a href="#events-on">on</a></li>
            <li><a href="#events-off">off</a></li>
            <li><a href="#events-trigger">trigger</a></li>
          </ul>
        </li>
        <li>
          <a href="#canvas">Canvas</a>
          <ul>
            <li><a href="#canvas-options">Options</a></li>
            <li><a href="#canvas-getdocumentelement">getDocumentElement</a></li>
            <li><a href="#canvas-render">render</a></li>
            <li><a href="#canvas-touch">touch</a></li>
            <li><a href="#canvas-add">add</a></li>
            <li><a href="#canvas-remove">remove</a></li>
          </ul>
        </li>
        <li>
          <a href="#timer">timer</a>
          <ul>
            <li><a href="#timer-events">Events</a></li>
            <li><a href="#timer-bind">bind</a></li>
            <li><a href="#timer-start">start</a></li>
            <li><a href="#timer-stop">stop</a></li>
          </ul>
        </li>
        <li>
          <a href="#element">Element</a>
          <ul>
            <li><a href="#element-options">Options</a></li>
            <li><a href="#element-events">Events</a></li>
            <li><a href="#element-set">set</a></li>
            <li><a href="#element-get">get</a></li>
            <li><a href="#element-transform">transform</a></li>
            <li><a href="#element-stop">stop</a></li>
          </ul>
        </li>
        <li>
          <a href="#sprite">Sprite</a>
          <ul>
            <li><a href="#sprite-options">Options</a></li>
            <li><a href="#sprite-addanimation">addAnimation</a></li>
            <li><a href="#sprite-freeze">freeze</a></li>
            <li><a href="#sprite-setframe">setFrame</a></li>
          </ul>
        </li>
        <li>
          <a href="#shape">Shape</a>
          <ul>
            <li><a href="#shape-options">Options</a></li>
          </ul>
        </li>
        <li>
          <a href="#text">Text</a>
          <ul>
            <li><a href="#text-options">Options</a></li>
          </ul>
        </li>
        <li>
          <a href="#rectangle">Rectangle</a>
          <ul>
            <li><a href="#rectangle-options">Options</a></li>
          </ul>
        </li>
        <li>
          <a href="#circle">Circle</a>
          <ul>
            <li><a href="#circle-options">Options</a></li>
          </ul>
        </li>
        <li>
          <a href="#ellipse">Ellipse</a>
        </li>
        <li>
          <a href="#customshape">CustomShape</a>
          <ul>
            <li><a href="#customshape-options">Options</a></li>
            <li><a href="#customshape-lineto">lineTo</a></li>
            <li><a href="#customshape-moveto">moveTo</a></li>
            <li><a href="#customshape-close">close</a></li>
          </ul>
        </li>
        <li>
          <a href="#assets">assets</a>
          <ul>
            <li><a href="#assets-preload">preload</a></li>
            <li><a href="#assets-define">define</a></li>
            <li><a href="#assets-get">get</a></li>
          </ul>
        </li>
        <li>
          <a href="#color">Color</a>
          <ul>
            <li><a href="#color-rgba">r, g, b, a</a></li>
            <li><a href="#color-set">set</a></li>
            <li><a href="#color-tostring">toString</a></li>
          </ul>
        </li>
        <li>
          <a href="#point">Point</a>
          <ul>
            <li><a href="#point-xy">x, y</a></li>
            <li><a href="#point-move">move</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="container">
      <h1 id="header">
        Rippl
      </h1>
      <p class="alert alert-warning">A draft, but usable</p>


      <h3 id="intro">What is <em>Rippl</em>?</h3>
      <p>
        <em>Rippl</em> is a <code>&lt;canvas&gt</code> library that's focused on performance and ease of use. Written completely in <a href="http://coffeescript.org/">CoffeeScript</a>, it can be used in both CoffeeScript or pure JavaScript projects alike. <em>Rippl</em> is built with <abbr title="Asynchronous Model Definition">AMD</abbr> support if you want to use it with <a href="http://requirejs.org/">RequireJS</a>. <em>Rippl</em> is entirely agnostic regarding how you structure your application &mdash; it will stay out of your way and be there for you when you need it.
      </p>

      <hr>

      <h3>Downloads <small>Right Click &rarr; Save As</small></h3>
      <div class="row-fluid row-download">
        <a href="rippl.min.js" class="btn btn-primary btn-large span5">Minified JavaScript</a>
        <div class="span7 download-description">
          For production.
        </div>
      </div>
      <div class="row-fluid row-download">
        <a href="rippl.js" class="btn btn-inverse btn-large span5">JavaScript</a>
        <div class="span7 download-description">
          For development and debugging.
        </div>
      </div>
      <div class="row-fluid row-download">
        <a href="rippl.coffee" class="btn btn-inverse btn-large span5">CoffeScript</a>
        <div class="span7 download-description">
          Bundled source with comments.
        </div>
      </div>
      <p>
        Or <a href="https://github.com/maciejhirsz/Rippl">get it from GitHub</a>!
      </p>

      <hr>

      <h3 id="events">Events</h3>

      <p>
        Nearly all objects in <em>Rippl</em> you will encounter inherit from the same <code>rippl.ObjectAbstract</code> class (you can extend from it yourself if you so desire). If you are used to working with <em>Backbone.js</em>, or just <em>jQuery</em> alone, you should be familiar with the <code>on()</code>, <code>off()</code> and <code>trigger()</code> methods for handling events. <em>Rippl</em> has its own implementation of those, so there are no dependencies or conflicts between libraries, while keeping your workflow seamless when jumping between the canvas elements, Backbone objects or jQuery wrapped DOM elements.
      </p>

      <h4 id="events-on">on <code>object.on(event, callback)</code></h4>
      <div class="indented">
        <ul class="unstyled">
          <li><strong>event</strong> <small class="muted">(String)</small></li>
          <li><strong>callback</strong> <small class="muted">(Function)</small></li>
        </ul>
        <p>
          Binds a listener to a specified event on the object, executes the <strong>callback</strong> function when triggered.
        </p>
      </div>

      <h4 id="events-off">off <code>object.off([event], [callback])</code></h4>
      <div class="indented">
        <ul class="unstyled">
          <li><strong>event</strong> <small class="muted">(String)</small></li>
          <li><strong>callback</strong> <small class="muted">(Function)</small></li>
        </ul>
        <p>
          Removes a single listener, all listeners to a specific event, or all listeners to all events altogether.
        </p>
<pre class="prettyprint lang-js">
// removes onChange listener from the frame event
object.off("frame", onChange);

// removes all listeners from the frame event
object.off("frame");

// removes all listeners from the object
object.off();</pre>
      </div>

      <h4 id="events-trigger">trigger <code>object.trigger(event, [arguments...])</code></h4>
      <div class="indented">
        <ul class="unstyled">
          <li><strong>event</strong> <small class="muted">(String)</small></li>
          <li><strong>arguments...</strong> <small class="muted">(Mixed)</small></li>
        </ul>
        <p>
          Triggers all listeners to a given event, all extra arguments get passed to the callback function.
        </p>
      </div>

      <hr>

      <h3 id="canvas">Canvas <code>new rippl.Canvas(options)</code></h3>

      <p>
        The <strong>Canvas</strong> class is the heart of <em>Rippl</em>, it wraps the native <code>&lt;canvas&gt</code> <abbr title="Document Object Model">DOM</abbr> element API and gives you all the power of drawing on it with none of the headache! In most cases you will only need one of these, but keep in mind sacking multiple <code>&lt;canvas&gt</code> elements to create layers &mdash; separating static and dynamic content &mdash; can increase performance. Basic use:
      </p>

<pre class="prettyprint lang-js">
var canvas = new rippl.Canvas({ id: "my-canvas" });</pre>

      <h4 id="canvas-options">Options</h4>
      <div class="indented">
        <h5>id <small>(String or null) default: <code>null</code></small></h5>
        <p>
          Document id of canvas tag to grab, if <code>null</code> a blank canvas is created.
        </p>
        <h5>width <small>(Number) default: <code>0</code></small></h5>
        <p>
          Width of canvas to create, if id was given then this value is ignored and instead the property of the element is used.
        </p>
        <h5>height <small>(Number) default: <code>0</code></small></h5>
        <p>
          Height of canvas to create, if id was given then this value is ignored and instead the property of the element is used.
        </p>
        <h5>static <small>(Boolean) default: <code>false</code></small></h5>
        <p>
          If set to <code>true</code> instance will not be bound to the <strong>timer</strong> and any (re-)rendering will have to be invoked manually.
        </p>
      </div>

      <h4 id="canvas-getdocumentelement">getDocumentElement <code>canvas.getDocumentElement()</code></h4>
      <p class="indented">
        Returns the <code>&lt;canvas&gt;</code> DOM element, useful if you create a blank canvas with <em>Rippl</em> and want to append it to DOM tree later.
      </p>

      <h4 id="canvas-render">render <code>canvas.render()</code></h4>
      <p class="indented">
        Renders a frame. Unlike raw canvas API elements added to the <strong>Canvas</strong> are not drawn until <strong>render</strong> method is called.
      </p>
      <p class="indented">
        <span class="label label-info">Heads up!</span>
        <small>You only need to call <strong>render</strong> manually for static <strong>Canvas</strong>.</small>
      </p>

      <h4 id="canvas-touch">touch <code>canvas.touch()</code></h4>
      <p class="indented">
        This method is normally used internally to mark if anything on given <strong>Canvas</strong> has changed and a render is required. You generally shouldn't need to use this yourself, but there is no harm in doing so. Calling <strong>touch</strong> multiple times between frames has no effect on performance.
      </p>
      <p class="indented">
        <span class="label label-info">Heads up!</span>
        <small>Unlike <strong>render</strong>, using <strong>touch</strong> alone does nothing but flags to render the canvas on the next frame.</small>
      </p>

      <h4 id="canvas-add">add <code>canvas.add(element)</code></h4>
      <p class="indented">
        Adds a new <strong>Element</strong>, such as <a href="#text"><strong>Text</strong></a> or <a href="#sprite"><strong>Sprite</strong></a> to the canvas. Returns added element for chaining purposes.
      </p>

      <h4 id="canvas-remove">remove <code>canvas.remove(element)</code></h4>
      <p class="indented">
        Removes specific <strong>Element</strong> from the <strong>Canvas</strong>.
      </p>

      <h4 id="canvas-wipe">wipe <code>canvas.wipe()</code></h4>
      <p class="indented">
        Removes everything from the <strong>Canvas</strong>.
      </p>

      <hr>

      <h3 id="timer">timer</h3>
      <p>
        The <strong>timer</strong> is another important building block of <em>Rippl</em> that enables animations on any non-static <strong>Canvas</strong>. Basic use:
      </p>

<pre class="prettyprint lang-js">
var canvas = new rippl.Canvas({ id: "my-canvas" });

// add some elements

rippl.timer.on("frame", function(time){
  // do stuff on the elements
});
</pre>

      <h4 id="timer-events">Events</h4>
      <div class="indented">
        <h5>frame <small class="muted">propagates: (Number) time in milliseconds</small></h5>
        <p>
          Triggers on each frame right before rendering, best place to do manual animations and / or game logic.
        </p>
      </div>

      <h4 id="timer-bind">bind <code>timer.bind(canvas)</code></h4>
      <p class="indented">
        Binds an instance of <strong>Canvas</strong> to the <strong>Timer</strong> making it render on (hopefully) static intervals. You can bind as many instances to a single <strong>Timer</strong> as you want (and you <em>really</em> should use just one).
      </p>
      <p class="indented">
        <span class="label label-info">Heads up!</span>
        <small><strong>Canvas</strong> will only re-render if there have been changes made to one of it's elements, or you manually call <strong>touch</strong> method on it between frames.</small>
      </p>

      <h4 id="timer-start">start <code>timer.start()</code></h4>
      <p class="indented">
        Starts the <strong>Timer</strong>.
      </p>
      <p class="indented">
        <span class="label label-info">Heads up!</span>
        <small>By default <strong>timer</strong> is initialized running, so there is no need to call this method unless you <strong>stop</strong> it first.</small>
      </p>

      <h4 id="timer-stop">stop <code>timer.stop()</code></h4>
      <p class="indented">
        Stops the <strong>timer</strong>.
      </p>

      <hr>

      <h3 id="element">Element</h3>
      <p>
        All <em>Rippl</em> elements inherit from this class, thus they all share some common options and methods.
      </p>
      <p>
        <span class="label label">Note</span>
        <small>This is an abstract class and as such you will never encounter it directly.</small>
      </p>

      <h4 id="element-options">Options</h4>
      <div class="indented">
        <h5>hidden <small>(Boolean) default: <code>false</code></small></h5>
        <p>
          Set to <code>true</code> to skip this element in rendering queue.
        </p>
        <h5>position <small>(<a href="#point">Point</a>) default: <code>Point(0, 0)</code></small></h5>
        <p class="tight">
          Position of the element on the canvas, left to right, top to bottom.
        </p>
        <p>
          <span class="label label-info">Heads up!</span>
          <small>This property is intended for more demanding use cases, most of the time using <strong>x</strong> and <strong>y</strong> is all you need.</small>
        </p>
        <h5>x <small>and</small> y <small>(Number) default: <code>0</code></small></h5>
        <p>
          Alternative way of setting element's position. Setting these options will effectively change the properties of <strong>position</strong>.
        </p>
        <h5>z <small>(Number) default: <code>0</code></small></h5>
        <p>
          Depth of the element. By default elements are sorted by the order you add them to the <strong>Canvas</strong>, changing <strong>z</strong> changes that order &mdash; elements with higher value of <strong>z</strong> are rendered on top. Can take any floating point value, including negative numbers.
        </p>
        <h5>snap <small>(Boolean) default: <code>false</code></small></h5>
        <p>
          When set to <code>true</code> the element will position itself to full pixel value of <strong>x</strong> and <strong>y</strong>, regardless of their values, useful for <a href="#sprite">sprites</a>.
        </p>
        <h5>width <small>(Number) default: <code>0</code></small></h5>
        <p>
          Width of the element in pixels.
        </p>
        <h5>height <small>(Number) default: <code>0</code></small></h5>
        <p>
          Height of the element in pixels.
        </p>
        <h5>alpha <small>(Number) default: <code>1</code></small></h5>
        <p>
          Transparency the element, value ranges from <code>0</code> (transparent) to <code>1</code> (opaque).
        </p>
        <h5>scaleX <small>and</small> scaleY <small>(Number) default: <code>1</code></small></h5>
        <p>
          Scales the element from it's original size. You can scale element independently on x and y axes, <code>1</code> is the original size, <code>-1</code> creates a mirror effect.
        </p>
        <h5>skewX <small>and</small> skewY <small>(Number) default: <code>1</code></small></h5>
        <p>
          Skews the element horizontally or vertically.
        </p>
        <h5>rotation <small>(Number) default: <code>0</code></small></h5>
        <p>
          Rotation of the element as factor of <em>pi</em> where <code>Math.PI</code> is 180 degrees.
        </p>
        <h5>anchorX <small>and</small> anchorY <small>(Number) default: <code>0.5</code></small></h5>
        <p>
          Defines the position of an anchor point according to which the element is placed on the <strong>Canvas</strong>. Default <code>0.5</code> value for both axes is center of the element, <code>0</code> is left (for x) or top (for y), <code>1</code> is right (for x) or bottom (for y).
        </p>
        <h5>anchorInPixels <small>(Boolean) default: <code>false</code></small></h5>
        <p>
          Setting this option to <code>true</code> will turn the <strong>anchorX</strong> and <strong>anchorY</strong> options from being a percentage of elements width and height to being absolute pixel positions.
        </p>
        <h5>composition <small>(string) default: <code>"source-over"</code></small></h5>
        <p class="tight">
          Defines how the element should be rendered on the canvas in relation the scene, useful for creating masks, values are analogous to <a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Compositing">globalCompositeOperation</a> in native canvas specification.
        </p>
        <p>
          <span class="label label-important">Warning</span>
          <small><code>"darker"</code> value may or may not be supported depending on your browser, <strong>do not use it</strong>.</small>
        </p>
      </div>

      <h4 id="element-events">Events</h4>
      <div class="indented">
        <h5>change</h5>
        <p>
          Triggers when an option or multiple options of the element have been changed.
        </p>
        <h5>change:<em>option</em></h5>
        <p>
          Triggers when a specific option of the element has been changed, f.e. changing <strong>alpha</strong> will trigger a <strong>change:alpha</strong> event.
        </p>
      </div>

      <h4 id="element-set">set <code>element.set(options)</code> <small>or</small> <code>element.set(option, value)</code></h4>
      <p class="indented">
        Changes one or multiple options of the element.
      </p>
      <pre class="indented prettyprint lang-js">
// scale the element down to half it's original size and make it half transparent
element.set({
  scaleX: 0.5,
  scaleY: 0.5,
  alpha: 0.5
});</pre>

      <h4 id="element-get">get <code>element.get(option)</code></h4>
      <p class="indented">
        Returns current value of a given option.
      </p>

      <h4 id="element-transform">transform <code>element.transform(params)</code></h4>
      <div class="indented">
        <p>
          Animates one or more option of the element over time. Params are:
        </p>
        <ul class="unstyled">
          <li><strong>duration</strong> <small class="muted">(Number) default: <code>1000</code></small> &mdash; duration of the animation in milliseconds.</li>
          <li><strong>delay</strong> <small class="muted">(Number) default: <code>0</code></small> &mdash; time to wait before starting the transition in milliseconds.</li>
          <li><strong>from</strong> <small class="muted">(Object) optional</small> &mdash; starting value or values of element options. If omitted then the element's current options are used.</li>
          <li><strong>to</strong> <small class="muted">(Object) optional</small> &mdash; ending value or values of element options. If omitted then the element's current options are used.</li>
          <li><strong>transition</strong> <small class="muted">(String) default: <code>"linear"</code></small> &mdash; smoothing transition to be used, allowed values are <code>"linear"</code>, <code>"easeIn"</code>, <code>"easeOut"</code> and <code>"easeInOut"</code>.</li>
        </ul>
        <p>
          Example:
        </p>
<pre class="prettyprint lang-js">
// move an element from point (0, 50) to (200, 75) over 3 seconds:
element.transform({
  duration: 3000,
  from: {
    x: 0,
    y: 50
  },
  to: {
    x: 200,
    y: 75
  }
});</pre>
        </div>

      <h4 id="element-stop">stop <code>element.stop()</code></h4>
      <p class="indented">
        Stops all ongoing transformations on the element.
      </p>

      <hr>

      <h3 id="sprite">Sprite <code>new rippl.Sprite(options)</code> <small>inherits from <a href="#element">Element</a></small></h3>
      <p>
        Creates an image sprite that can be cropped and animated.
      </p>
      <pre class="prettyprint lang-js">
// create a sprite using rippl.png as source
var logo = new rippl.Sprite({
  src: "rippl.png",
  x: 0,
  y: 0,
  // reset anchor to top left corner
  anchorX: 0,
  anchorY: 0
});

// add the sprite to the rendering queue
canvas.add(logo);</pre>

      <h4 id="sprite-options">Options</h4>
      <div class="indented">
        <h5>src <small>(String, ImageAsset or <a href="#canvas">Canvas</a>) required</small></h5>
        <p>
          Image source to be rendered, takes either an url string, <strong>ImageAsset</strong> class instance (read: <a href="#assets-get">assets.get</a>) or <strong>Canvas</strong> class instance.
        </p>
        <h5>width <small>(Number) default: <code>0</code></small></h5>
        <p>
          Same as <a href="#element-options"><strong>Element</strong></a>, will default to asset's width if set to <code>0</code>.
        </p>
        <h5>height <small>(Number) default: <code>0</code></small></h5>
        <p>
          Same as <a href="#element-options"><strong>Element</strong></a>, will default to asset's height if set to <code>0</code>.
        </p>
        <h5>cropX <small>and</small> cropY <small>(Number) default: <code>0</code></small></h5>
        <p class="tight">
          Offsets the original image to a specific point on the source image.
        </p>
        <p class="tight">
          <span class="label label-important">Warning</span>
          <small>Using sprite sheet animation or <strong>setFrame</strong> will ignore and override any <strong>CropX</strong> and <strong>CropY</strong> settings.</small>
        </p>
        <p>
          <span class="label label-info">Heads up!</span>
          <small>This only affects the frame animation of the sprite, not transformations or general canvas rendering queue.</small>
        </p>
      </div>

      <h4 id="sprite-addanimation">addAnimation <code>sprite.addAnimation(label, fps, frames)</code> <small>or</small> <code>sprite.addAnimation(label, fps, first, last)</code></h4>
      <p class="indented">
        Defines a new animation label, with a set fps and a list of frames to it. Can take either a complete list of frames as an array, or starting and ending index as integers - in which case an array is formed with all frames in between, including the ones given.
      </p>
      <pre class="prettyprint lang-js">
sprite.addAnimation("idle", 10, [0,1,2,3,4,5]);
// the line above does the same thing as the line below
sprite.addAnimation("idle", 10, 0, 5);</pre>

      <h4 id="sprite-animate">animate <code>sprite.animate([label])</code></h4>
      <p class="indented">
        Starts playing an animation with given label. If label is omitted then it defaults to <code>"idle"</code>. Any animation upon it's end will attempt to trigger <strong>animate</strong> again to switch back and loop <code>"idle"</code>.
      </p>

      <h4 id="sprite-freeze">freeze <code>sprite.freeze()</code></h4>
      <p class="indented">
        Stops any frame animation and freezes the sprite at current frame.
      </p>

      <h4 id="sprite-setframe">setFrame <code>sprite.setFrame(index)</code></h4>
      <p class="indented">
        Switches the sprite to frame at given index. Frames are calculated as factors of sprite's width and height on the sprite sheet (<strong>src</strong>), order is left to right top to bottom. For a sprite sheet having 8 frames in a 4 by 2 grid indexes are as follows:
      </p>
      <table class="indented table table-bordered table-frames">
        <tbody>
          <tr>
            <td>0</td><td>1</td><td>2</td><td>3</td>
          </tr>
          <tr>
            <td>4</td><td>5</td><td>6</td><td>7</td>
          </tr>
        </tbody>
      </table>

      <hr>

      <h3 id="shape">Shape <small>inherits from <a href="#element">Element</a></small></h3>
      <p>
        <strong>Shape</strong> is a specialized type of <strong>Element</strong> that deals with vector graphics (including <a href="#text"><strong>Text</strong></a>).
      </p>
      <p>
        <span class="label label">Note</span>
        <small>This is an abstract class and as such you will never encounter it directly.</small>
      </p>

      <h4 id="shape-options">Options</h4>
      <div class="indented">
        <h5>fill <small>(Boolean) default: <code>true</code></small></h5>
        <p>
          If set to <code>true</code> the drawn shape will be filled.
        </p>
        <h5>color <small>(String or <a href="#color">Color</a>) default: <code>"#000"</code></small></h5>
        <p>
          Color of the fill.
        </p>
        <h5>stroke <small>(Number) default: <code>0</code></small></h5>
        <p>
          Width of a stroke to be drawn over the shape.
        </p>
        <h5>strokeColor <small>(String or <a href="#color">Color</a>) default: <code>"#000"</code></small></h5>
        <p>
          Color of the stroke.
        </p>
        <h5>shadow <small>(Boolean) default: <code>false</code></small></h5>
        <p>
          If set to <code>true</code> shadow will be drawn.
        </p>
        <h5>shadowX <small>and</small> shadowY <small>(Number) default: <code>0</code></small></h5>
        <p>
          Offset at which the shadow should be drawn.
        </p>
        <h5>shadowBlur <small>(Number) default: <code>0</code></small></h5>
        <p>
          Blur to be applied to the shadow.
        </p>
        <h5>lineCap <small>(String) default: <code>"butt"</code></small></h5>
        <p>
          Defines how to render the ends of the stroke, allowed values are: <code>"butt"</code>, <code>"round"</code> and <code>"square"</code>.
        </p>
        <h5>lineJoin <small>(String) default: <code>"miter"</code></small></h5>
        <p>
          Defines how to render the joints of the stroke, allowed values are: <code>"miter"</code>, <code>"bevel"</code> and <code>"round"</code>.
        </p>
        <h5>erase <small>(Boolean) default: <code>false</code></small></h5>
        <p>
          If set to <code>true</code> the canvas area of the shape will be erased prior to rendering the shape.
        </p>
      </div>

      <hr>

      <h3 id="text">Text <code>new rippl.Text(options)</code> <small>inherits from <a href="#shape">Shape</a></small></h3>
      <pre class="prettyprint lang-js">
// create a 'Hello World' text
var text = new rippl.Text({
  label: "Hello World",
  x: 200,
  y: 50,
  size: 20,
  bold: true,
  color: "#ff7f00",
  stroke: 2,
  strokeColor: "#000"
});

// add the text to the rendering queue
canvas.add(text);</pre>

      <h4 id="text-options">Options</h4>
      <div class="indented">
        <h5>label <small>(String) default: <code>"Rippl"</code></small></h5>
        <p>
          Text label to be rendered.
        </p>
        <h5>size <small>(Number) default: <code>12</code></small></h5>
        <p>
          Font size in pixels.
        </p>
        <h5>font <small>(String) default: <code>"sans-serif"</code></small></h5>
        <p>
          Font family to be used.
        </p>
        <h5>bold <small>(Boolean) default: <code>false</code></small></h5>
        <p>
          If set to true, text will be rendered as bold.
        </p>
        <h5>italic <small>(Boolean) default: <code>false</code></small></h5>
        <p>
          If set to true, text will be rendered as italic.
        </p>
        <h5>align <small>(String) default: <code>"center"</code></small></h5>
        <p>
          Horizontal alignment, allowed values are: <code>"left"</code>, <code>"center"</code> and <code>"right"</code>.
        </p>
        <h5>baseline <small>(String) default: <code>"middle"</code></small></h5>
        <p>
          Baseline, or vertical alignment, allowed values are: <code>"top"</code>, <code>"hanging"</code>, <code>"middle"</code>, <code>"alphabetic"</code>, <code>"ideographic"</code> and <code>"bottom"</code>.
        </p>
      </div>

      <hr>

      <h3 id="rectangle">Rectangle <code>new rippl.Rectangle(options)</code> <small>inherits from <a href="#shape">Shape</a></small></h3>
      <pre class="prettyprint lang-js">
// create a green rectangle
var rect = new rippl.Rectangle({
  color: "#0f0",
  x: 200,
  y: 50,
  width: 150,
  height: 150
});

// add the rectangle to the rendering queue
canvas.add(rect);</pre>
      <p>
        <span class="label label-info">Heads up!</span>
        <small>Just like <a href="#sprite"><strong>Sprite</strong></a>, <strong>Rectangle</strong> is anchored at it's center, if you want it to be drawn from top left corner (or otherwise) you must adjust the <strong>anchorX</strong> and <strong>anchorY</strong> options.</small>
      </p>

      <h4 id="rectangle-options">Options</h4>
      <div class="indented">
        <h5>cornerRadius <small>(Number) default: <code>0</code></small></h5>
        <p>
          Radius to which the corners should be rounded.
        </p>
      </div>

      <hr>

      <h3 id="circle">Circle <code>new rippl.Circle(options)</code> <small>inherits from <a href="#shape">Shape</a></small></h3>
      <pre class="prettyprint lang-js">
// create a blue filled circle
var cirle = new rippl.Circle({
  color: "#00f",
  x: 200,
  y: 50,
  radius: 75
});

// add the cirle to the rendering queue
canvas.add(cirle);</pre>

      <h4 id="circle-options">Options</h4>
      <div class="indented">
        <h5>radius <small>(Number) default: <code>0</code></small></h5>
        <p>
          Radius of the circle to draw.
        </p>
        <h5>angle <small>(Number) default: <code>Math.PI * 2</code></small></h5>
        <p>
          Angle to draw, <code>Math.PI * 2</code> draws a closed circle.
        </p>

      </div>

      <hr>

      <h3 id="ellipse">Ellipse <code>new rippl.Ellipse(options)</code> <small>inherits from <a href="#shape">Shape</a></small></h3>
      <pre class="prettyprint lang-js">
// create a stroked ellipse
var ellipse = new rippl.Ellipse({
  fill: false,
  stroke: 2,
  x: 200,
  y: 50,
  width: 100,
  height: 50
});

// add the ellipse to the rendering queue
canvas.add(ellipse);</pre>

      <hr>

      <h3 id="customshape">CustomShape <code>new rippl.CustomShape(options)</code> <small>inherits from <a href="#shape">Shape</a></small></h3>
      <p>
        Allows for complete freedom in drawing shapes.
      </p>
      <pre class="prettyprint lang-js">
// create a violet custom shape for a triangle.
var triangle = new rippl.CustomShape({
  color: "#f0f",
  x: 200,
  y: 50
});

// move to starting point
triabgle.moveTo(-60, 30);

// set two lines forming arms of the triangle
triangle.lineTo(60, -30);
triangle.lineTo(0, 30);

// close the path creating the third line
triangle.close();

// add the triangle to the rendering queue
canvas.add(triangle);</pre>

      <h4 id="customshape-options">Options</h4>
      <div class="indented">
        <h5>rootX <small>and</small> rootY <small>(Number) default: <code>0</code></small></h5>
        <p class="tight">
          Starting point of the shape relative to the anchor.
        </p>
        <p>
          <span class="label label-info">Heads up!</span>
          <small>Due to it's nature, CustomShape has default <code>0</code> values for <strong>anchorX</strong> and <strong>anchorY</strong>, as well as <strong>anchorInPixels</strong> hard set to <code>true</code>.</small>
        </p>
      </div>

      <h4 id="customshape-lineto">lineTo <code>shape.lineTo(x, y)</code> <small>or</small> <code>shape.lineTo(Point)</code></h4>
      <p class="indented">
        Draws a line from current point (starting from root) to specified. Returns and can an instance of accept <a href="#point"><strong>Point</strong></a>.
      </p>

      <h4 id="customshape-moveto">moveTo <code>shape.moveTo(x, y)</code> <small>or</small> <code>shape.moveTo(Point)</code></h4>
      <p class="indented">
        Jumps to specified point without drawing a line. Returns and can an instance of accept <a href="#point"><strong>Point</strong></a>.
      </p>

      <h4 id="customshape-close">close <code>shape.close()</code></h4>
      <p class="indented">
        Closes the path.
      </p>

      <hr>

      <h3 id="assets">assets</h3>
      <p>
        <em>Rippl</em> comes with its own assets manager module to take away the burden of preloading images off your shoulders, as well as to make it easy to host images on external domains in the <a href="http://en.wikipedia.org/wiki/Data_URI_scheme">Data URI</a> format.
      </p>

      <h4 id="assets-preload">preload <code>rippl.assets.preload(url, [callback])</code></h4>
      <div class="indented">
        <ul class="unstyled">
          <li><strong>url</strong>  <small class="muted">(String or Array)</small> &mdash; a singe url or an array of urls to preload.</li>
          <li><strong>callback</strong> <small class="muted">(Function)</small> &mdash; callback function to fire when all urls are finished preloading.</li>
        </ul>
        <p>
          Preloads an image or a batch of images and fires the callback when done.
        </p>
      </div>

      <h4 id="assets-define">define <code>rippl.assets.define(url, dataURI)</code></h4>
      <p class="indented">
        Defines a faux url asset with Data URI as a source.
      </p>

      <h4 id="assets-get">get <code>rippl.assets.get(url)</code></h4>
      <p class="indented">
        Returns an <strong>ImageAsset</strong> object containing an image from the given url. Always returns the same instance for the same url. This method gets used internally when an url string is passed as a <strong>src</strong> option for the <strong>Sprite</strong> class.
      </p>

      <hr>

      <h3 id="color">Color <code>new rippl.Color(r, g, b, [a])</code> <small>or</small> <code>new rippl.Color(string)</code></h3>
      <p>
        Creates a color object, most of the time <em>Rippl</em> will create one for you when you use string values for colors on elements. All color values are integers ranging from <code>0</code> to <code>255</code>, while alpha value is a float ranging from <code>0</code> to <code>1</code>. Accepted string formats are six-digit and three-digit hex tripplets (<code>"#ffffff"</code> and <code>"#fff"</code> respectively) as well as rgba string (<code>"rgba(255, 255, 255, 1.0)"</code>). Alpha (<strong>a</strong>) can be omitted, in which case it defaults to <code>1</code>.
      </p>

      <h4 id="color-rgba">r <code>color.r</code>, g <code>color.g</code>, b <code>color.b</code>, a <code>color.a</code></h4>
      <p class="indented">
        <span class="label label-important">Read only</span> Current values of color channels. Use the <strong>set</strong> method if you need to change them.
      </p>
      <pre class="prettyprint lang-js indented">
// create a new color
var green = new rippl.Color("#0f0");

console.log(green.r); // prints out 0
console.log(green.g); // prints out 255
console.log(green.b); // prints out 0
console.log(green.a); // prints out 1</pre>

      <h4 id="color-set">set <code>color.set(r, g, b, [a])</code></h4>
      <p class="indented">
        Sets new color values. Alpha (<strong>a</strong>) can be omitted in which case it keeps the current value.
      </p>

      <h4 id="color-tostring">toString <code>color.toString()</code></h4>
      <p class="indented">
        Returns an rgba formatted string code of the color, used on type casting to string by default.
      </p>

      <pre class="prettyprint lang-js indented">
// create a new color
var orange = new rippl.Color("#ff7f00");

// pops an alert displaying "rgba(255,127,0,1)"
alert(orange);</pre>

      <h3 id="point">Point <code>new rippl.Point(x, y)</code></h3>
      <p>
        Creates a point object.
      </p>

      <h4 id="point-xy">x <code>point.x</code>, y <code>point.y</code></h4>
      <p class="indented">
        <span class="label label-important">Read only</span> Current position of the point. Use the <strong>move</strong> method if you need to change them.
      </p>

      <h4 id="point-move">move <code>point.move(x, y)</code></h4>
      <p class="indented">
        Sets new position.
      </p>

      <pre class="prettyprint lang-js indented">
var point = new rippl.Point(10, 20);

// points can be re-used
shapeA.lineTo(point);
shapeB.lineTo(point);

// move the line for both shapes
point.move(20, 40);</pre>

      <p><br><br><br><br></p>
    </div>
    <script src="rippl.min.js"></script>
    <script src="docs/js/prettify.js"></script>
    <script src="docs/js/logo.js"></script>
  </body>
</html>